<%@ page contentType="text/html; charset=UTF-8" buffer="16kb"%>
<%@ include file="../include/taglib.jsp"%>
<%
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
    Long resid = Long.parseLong(request.getParameter("id"));
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>linux综合性能页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<%@ include file="../include/common.jsp"%>
<%@ include file="../include/table.jsp"%>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/progressbar/jquery.progressbar.min.js"></script>

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>

<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.jqueryplugin.js"></script>
	
<script type="text/javascript">

	//初始化会话列表
	function initList(){
		//会话列表
		$.ajax({
			type:'post',
			url:'real-time!initDatatables.action',
			data:{resId:<%=resid %>,
				childType:'1202010900000',
				propId:'120201090000004'
			},
			global:false,
			async:false,
			cache:false,
			dataType:'json',
			success:function(data,textStatus){
				var columnArray = data.columns;
				var datas       = data.data;
				var props       = data.props;
				$.each(columnArray,function(index,ob){
					var cols = ob;
					$.each(cols,function(index,ob){
						$('#sessionList > thead > tr').append('<th>'+ob+'</th>');
					});
					
					var tbl = $('#sessionList > tbody ');
					if(datas[index]!=null){
						//构建数据
						$.each(datas[index],function(i,o){
							var dataHtml = (i%2)==0?'<tr class="odd" >': '<tr class="even" >';
								$.each(o,function(t,en){
									dataHtml +='<td>'+en+'</td>';
								});
							dataHtml +='</tr>';
							tbl.append(dataHtml);
					   });
					}
				});
			}
		});		
		
		//死锁会话列表
		$.ajax({
			type:'post',
			url:'real-time!initDatatables.action',
			data:{resId:<%=resid %>,
				childType:'1202010900000',
				propId:'120201090000005'
			},
			global:false,
			async:false,
			cache:false,
			dataType:'json',
			success:function(data,textStatus){
				var columnArray = data.columns;
				var datas       = data.data;
				var props       = data.props;
				$.each(columnArray,function(index,ob){
					var cols = ob;
					$.each(cols,function(index,ob){
						$('#invalidSessionList > thead > tr').append('<th>'+ob+'</th>');
					});
					
					var tbl = $('#invalidSessionList > tbody ');
					if(datas[index]!=null){
						//构建数据
						$.each(datas[index],function(i,o){
							var dataHtml = (i%2)==0?'<tr class="odd" >': '<tr class="even" >';
								$.each(o,function(t,en){
									dataHtml +='<td>'+en+'</td>';
								});
							dataHtml +='</tr>';
							tbl.append(dataHtml);
					   });
					}
				});
			}
		});		
	}
	
	var tcpChart;
	var swapChart;
	var processChart
	var invalidChart
	function initTCP() {
			tcpChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","tcpChart1", "100%", "100%", "0", "1" );
			swapChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","swapChart11", "100%", "100%", "0", "1" );
			processChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","processChart11", "100%", "100%", "0", "1" );
			invalidChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","invalidChart22", "100%", "100%", "0", "1" );
		
		//吞吐
		$.ajax({
			url : 'real-time!get2LineChart.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				propIds:'110201000000007,110201000000008,110201000000009'
			},
			success : function(data) {
				tcpChart.setJSONData(data);
				tcpChart.render("throughputDiv");
			}
		});
		
		//会话数
		$.ajax({
			url : 'real-time!get2LineChart.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1202010900000',
				propIds:'120201090000001,120201090000002,120201090000003'
			},
			success : function(data) {
				swapChart.setJSONData(data);
				swapChart.render("sessionDiv");
			}
		});
		
		
		//进程
		$.ajax({
			url : 'real-time!get2LineChart.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1202010800000',
				propIds:'120201080000001,120201080000002,120201080000003,120201080000004'
			},
			success : function(data) {
				processChart.setJSONData(data);
				processChart.render("processDiv");
			}
		});
		
		//无效信息
		$.ajax({
			url : 'real-time!get2LineChart.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1202011100000',
				propIds:'120201110000001,120201110000002'
			},
			success : function(data) {
				invalidChart.setJSONData(data);
				invalidChart.render("invalidDiv");
			}
		});
	}
	
	
	var uptimeColChart;
	var fsColChartc;
	function initBaseInfo(){
			//基本信息
			$.ajax({
				url : 'real-time!getBaseInfo.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propIds:'attr_110200000000001,prop_110201000000003,prop_110201000000004,prop_110201000000001,prop_110201000000005,prop_110200000000002,prop_110201000000006'
				},
				success : function(data) {
					$('#attr_110200000000001').text(data.attr_110200000000001); //实例名
					$('#prop_110201000000003').text(data.prop_110201000000003); //版本
					$('#prop_110201000000004').text(data.prop_110201000000004); //字符集
					$('#prop_110201000000001').text(data.prop_110201000000001); //创建时间
					$('#prop_110201000000005').text(data.prop_110201000000005); //启动时间
					$('#prop_110200000000002').text(data.prop_110200000000002); //响应时间
					$('#prop_110201000000006').text(data.prop_110201000000006); //状态
					$('#resIp').text(data.ip);
				}
			});
			
			//SGA信息
			$.ajax({
				url : 'real-time!getBaseInfo.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					childType:'1202010100000',
					propIds:'prop_120201010000002,prop_120201010000003,prop_120201010000004,prop_120201010000005,prop_120201010000006'
				},
				success : function(data) {
					$('#prop_120201010000002').progressBar(data.prop_120201010000002,{ showText: true, barImage: '${pageContext.request.contextPath}/style/default/bsm/images/progressbg_yellow.gif'}); 
					$('#prop_120201010000003').progressBar(data.prop_120201010000003,{ showText: true, barImage: '${pageContext.request.contextPath}/style/default/bsm/images/progressbg_yellow.gif'}); 
					$('#prop_120201010000004').progressBar(data.prop_120201010000004,{ showText: true, barImage: '${pageContext.request.contextPath}/style/default/bsm/images/progressbg_yellow.gif'}); 
					$('#prop_120201010000005').progressBar(data.prop_120201010000005,{ showText: true, barImage: '${pageContext.request.contextPath}/style/default/bsm/images/progressbg_yellow.gif'}); 
					$('#prop_120201010000006').progressBar(data.prop_120201010000006,{ showText: true, barImage: '${pageContext.request.contextPath}/style/default/bsm/images/progressbg_yellow.gif'} ); 
				}
			});
			
			//PGA 
			$.ajax({
				url : 'real-time!get2ColumnPropChart.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					childType:'1202011200000',
					propIds:'120201120000001,120201120000002,120201120000003',
					namealias:'使用量,分配量,最大量'
				},
				success : function(data) {
					if(typeof uptimeColChart == undefined || uptimeColChart == null){
						 uptimeColChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf","uptimeColChart11", "100%", "130", "0", "1" );
					}
					uptimeColChart.setJSONData(data);
					uptimeColChart.render("pgaColChart");
				}
			});
			
			//表空间
			if(typeof fsColChartc == undefined || fsColChartc == null){
				fsColChartc =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf","fsColChart11", "100%", "130", "0", "1" );
			}
			$.ajax({
				url : 'real-time!get2ColumnChart.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					detail:1,
					childType:'1202010600000',
					propIds:'120201060000003',
					top:'15',
					unit:'%'
				},
				success : function(data) {
					fsColChartc.setJSONData(data);
					fsColChartc.render("fsColChart");
				}
			});
	}
	
	$(document).ready(function() {
			initBaseInfo();
			initTCP();
			initList();
		setInterval('initBaseInfo()',60000);
	});
</script>

</head>
<body>

	<div class="column">
		<div class="col-main">
			<!--基本信息-->
			<div class="col-l-extra h-400">
			<h2 class="title-h2 m-0">基本信息</h2>
			<ul class="col-l-ul">
					<li><span class="col-l-ul-l" >数据库类别:</span><span 
								class="col-l-ul-r"><img src="${pageContext.request.contextPath}/style/default/bsm/perf/images/oracle131_24.gif"></img></span>
					</li>
					<li><span class="col-l-ul-l" >IP:</span><span id="resIp"
							class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" >实例名:</span><span id="attr_110200000000001"
								class="col-l-ul-r"></span>
					</li>		
					<li><span class="col-l-ul-l" >版本:</span><span id="prop_110201000000003"
								class="col-l-ul-r"></span>
					</li>			
					<li><span class="col-l-ul-l" >字符集:</span><span id="prop_110201000000004"
								class="col-l-ul-r"></span>
					</li>			
					<li><span class="col-l-ul-l" >创建时间:</span><span id="prop_110201000000001"
							class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" >启动时间:</span><span id="prop_110201000000005"
								class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" >响应时间(ms):</span><span id="prop_110200000000002"
								class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" >状态:</span><span id="prop_110201000000006"
								class="col-l-ul-r"></span>
					</li>
			   </ul>
			</div>
			<!--@end基本信息-->
			<div class="col-r-main">
				<div class="col-v-rate-extra" >
				  <h2 class="title-h2 m-0">PGA</h2>
				  <div id="pgaColChart"></div>
				</div>
				<!--@end基本信息-->
				<div class="col-v-rate-extra f-r">
				<h2 class="title-h2 m-0">SGA</h2>
					  	<ul class="col-l-ul">
							<li><span class="col-l-ul-l" style="width:60%;text-align:left;">数据缓冲区命中率:</span><span
								style="float:left" id="prop_120201010000002"></span>
							</li>
							<li><span class="col-l-ul-l" style="width:60%;text-align:left;">日志缓冲区失败率:</span><span
								style="float:left" id="prop_120201010000003"></span>
							</li>
							<li><span class="col-l-ul-l" style="width:60%;text-align:left;">数据字典快存失败率:</span><span
								style="float:left" id="prop_120201010000004"></span>
							</li>
							<li><span class="col-l-ul-l" style="width:60%;text-align:left;">库缓存失败率:</span><span
								style="float:left" id="prop_120201010000005"></span>
							</li>
							<li><span class="col-l-ul-l" style="width:60%;text-align:left;">共享池空闲比率:</span><span
								style="float:left" id="prop_120201010000006"></span>
							</li>
					   </ul>
			    </div>
			     <div class="col-v-rate-extra" style="width:99%">
		            <h2 class="title-h2 m-0">表空间使用率 TOP15</h2>
			       <div id="fsColChart"></div>
			    </div>
		 </div>   
	  </div>
	</div>
	
	       <div class="column">
				<div class="col-main" >
					<div class="col-net-main " >
						<h2 class="title-h2 m-0">吞吐 [当天趋势图]-[每秒提交事务数,每秒回滚事务数,每秒调用次数]</h2>
					    <div id="throughputDiv" class=" h-150 w-100"></div>
					</div>
					<div class="col-net-main f-r w-48" >
						<h2 class="title-h2 m-0">会话数 [当天趋势图]-[当前会话数,活动会话数,死锁会话数]</h2>
						<div id="sessionDiv" class= "col-r-main h-150 w-100"></div>
					</div>
				</div>
	        </div>
	        
	       <div class="column">
				<div class="col-main">
					<div class="col-net-main" >
						<h2 class="title-h2 m-0">进程 [当天趋势图]-[当前进程数,DBWR进程数,ARCH进程数,LCKn进程数]</h2>
						<div id="processDiv" class=" h-150 w-100"></div>
					</div>
					
					<div class="col-net-main f-r w-48" >
						<h2 class="title-h2 m-0">无效信息 [当天趋势图]-[无效对象数,失效索引数]</h2>
						<div id="invalidDiv" class= "col-r-main h-150 w-100"></div>
					</div>
				</div>
	        </div>
		 	
		 	<div class="column b-1">
					<h2 class="title-h2 m-0">会话列表</h2>
				    <table width='100%' cellpadding='0' cellspacing='0' border='0' class='display' id='sessionList'>
				       <thead>
				           <tr>
				           </tr>
				       </thead>
				       <tbody>
				       </tbody>
				    </table>
			</div>
			
		 	<div class="column b-1">
					<h2 class="title-h2 m-0">死锁会话列表</h2>
				   <table width='100%' cellpadding='0' cellspacing='0' border='0' class='display' id='invalidSessionList'>
				       <thead>
				             <tr>
				             </tr>
				       </thead>
				       <tbody>
				       </tbody>
				   </table>
			</div>
			 
			<div class="column" style="width:100px; height:5px;"></div>
</body>

</html>